<template>
  <div class="content">
    <div class="cont_top">
      <el-card class="box-card">
        模块一
        <div>
          <p><span>当天日期：{{ todaysDate }}</span></p>
        </div>
      </el-card>
      <el-card class="box-card">
        模块二
        <div>
          <el-input v-model="fewDays" size="small" placeholder="请输入天数" clearable />
          <el-button type="primary" size="small" @click="getBeforeDate()">点击</el-button>
          <p><span>获取指定天数前的日期：{{ beforeDate }}</span></p>
        </div>
      </el-card>
      <el-card class="box-card">
        模块三
        <div>
          <el-input v-model="quarterDays" size="small" placeholder="请输入季度" clearable />
          <el-button type="primary" size="small" @click="getQuarterBeforeDate()">点击</el-button>
          <p>获取指定季度数前日期：<span>{{ quarterBeforeDate }}</span></p>
        </div>
      </el-card>

    </div>
    <div class="cont_center">
      <el-card class="box-card">
        <!-- echarts 图表 -->
        <echarsBar />
      </el-card>
    </div>
    <!-- <div class="cont_bottom">
      模块五
    </div> -->
  </div>
</template>
<script>
import echarsBar from '@/components/echarts/echarsBar.vue';
export default {
  components: {
    echarsBar,
  },
  data() {
    return {
      todaysDate: '', // 当天日期
      fewDays: '', // 指定天数前
      quarterDays: '', // 指定季度数前
      beforeDate: '', // 指定天数前的日期
      quarterBeforeDate: '', // 指定季度数前日期
    };
  },
  mounted() {
    this.getBeforeDate(0);
  },
  methods: {
    // 获取指定天数前的日期函数：fewDays是传入的参数（天数）
    getBeforeDate(n) {
      var d = new Date();
      // var year = d.getFullYear();
      // var mon = d.getMonth() + 1;
      // var day = d.getDate();
      // if (Number(mon) > 1) {
      //   mon = mon - 1;
      // } else {
      //   year = year - 1;
      //   mon = 12;
      // }
      // d.setDate(d.getDate() - this.fewDays);
      // year = d.getFullYear();
      // mon = d.getMonth() + 1;
      // day = d.getDate();
      d.setDate(d.getDate() - this.fewDays);
      var year = d.getFullYear();
      var mon = d.getMonth() + 1;
      var day = d.getDate();
      var s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
      if (n !== 0) {
        this.beforeDate = s;
      } else {
        this.todaysDate = s;
      }
      // return s;
    },
    // 获取指定季度数前日期函数：
    getQuarterBeforeDate() {
      var date = new Date();
      var quarter = Math.floor(date.getMonth() / 3) + 1;
      var year = date.getFullYear();
      quarter -= this.quarterDays;
      while (quarter <= 0) {
        quarter += 4;
        year--;
      }
      var month = quarter * 3;
      var day = date.getDate();
      var s = year + "-" + (month < 10 ? ('0' + month) : month) + "-" + (day < 10 ? ('0' + day) : day);
      this.quarterBeforeDate = s;
      // return new Date(year, month, day);
    },
  },
};
</script>
<style lang="scss" scoped>
.content{
  .cont_top{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    height: 200px;
    .box-card{
      width:33%;
    }
  }
.cont_center{
  .box-card{
    width: 100%;
    height: auto;
    }

  }
::v-deep.el-input{
  // display: inline-block;
  width: 60%;
  margin-right: 10px;
}
}

</style>
